<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">

    <f:view contentType="text/html">
        <h:head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
            <title>Tags</title>

            <link type="text/css" rel="stylesheet" href="https://www.gstatic.com/freebase/suggest/4_2/suggest.min.css" />
            <!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>-->
            <script type="text/javascript" src="https://www.gstatic.com/freebase/suggest/4_2/suggest.min.js"></script>

            <script type="text/javascript">

                $(function() {
                    $("#courseid")
                            .suggest({
                        key: "AIzaSyA0Fjcd-S9IZV8WKl6o4JQsyTseu1M43NA",
                        show_id: true
                    })
                            .bind("fb-select", function(e, data) {
                        if (data.notable) {
                            document.getElementById('courseid').value = data.name + " " + '(' + data.notable.name + ')';
                        } else {
                            document.getElementById('courseid').value = data.name;
                        }
                    });
                });

            </script>
        </h:head>

        <h:body>

            <p:layout fullPage="true">    
                <p:layoutUnit position="north" header="EducationX">                   
                    <p:toolbar style="height:25px">
                        <p:toolbarGroup align="left">
                            <h:link value="Courses" outcome="courses"/>     
                            <p:separator />  
                            <h:link value="User Page" outcome="userPage" />
                            <p:separator />  
                            <h:link value="Tags" />
                        </p:toolbarGroup>
                        <p:toolbarGroup align="right">
                            <p:inputText id="courseid" style="width:300px; height:20px; font-size:12px" />
                            <p:button value="Search" style="top:3px; height:20px; font-size: 12px">
                            </p:button>
                        </p:toolbarGroup>
                    </p:toolbar>                    
                </p:layoutUnit>      

                <p:layoutUnit position="center">

                    <p:dataGrid var="car" value="#{tag.tag.tagsList}" columns="3"
                                paginator="true"
                                paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                                >

                    </p:dataGrid>

                </p:layoutUnit> 
            </p:layout>             
        </h:body>
    </f:view>
</html>
